<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="赛事详情11" />
      <scroll-view scroll-y class="scroll-view-content">
        <!-- 顶部大图 -->
        <image class="top-bg" :src="imgUrl + 'a.jpg'" mode="aspectFill" />

        <!-- 俱乐部卡片 -->
        <view class="club-card">
          <image class="club-logo" :src="imgUrl + 'WechatIMG136@2x.png'" />
          <view class="club-info">
            <view class="club-title-row">
              <view class="club-name mr-auto">草源体育俱乐部</view>
              <view class="club-score">
                积分：
                <text class="score-num">29482</text>
              </view>
            </view>
            <view class="club-leader-row">
              <text>领队：方励谚</text>
              <image class="qrcode-icon" :src="imgUrl + 'location2@2x.png'" />
            </view>
            <view class="club-desc">
              草源体育俱乐部坐落于风景秀丽、交通便利的，拥有面积达[X]平方米的现代化运动场地...
            </view>
          </view>
        </view>

        <!-- 功能区 -->
        <view class="func-bar">
          <view class="func-item">
            <image :src="imgUrl + 'lightning.png'" class="func-icon" />
            <text>已助力</text>
          </view>
          <view class="func-item">
            <image :src="imgUrl + 'home.png'" class="func-icon" />
            <text>主页</text>
          </view>
          <view class="func-item">
            <image :src="imgUrl + 'share.png'" class="func-icon" />
            <text>分享</text>
          </view>
        </view>
        <view class="club-tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab {{activeTab === index ? 'active' : ''}}"
            :data-index="index"
            @click="onTab(index)"
          >
            {{tab}}
            <image v-if="index === tabs.length - 1" :src="imgUrl + 'home.png'" class="tab-icon" />
          </view>
        </view>
        
        <view class="schedule-filter-row">
          <picker :range="projectList" :value="projectIndex" @change="onProjectChange" class="filter-picker">
            <view class="filter-value">{{projectList[projectIndex]}}</view>
          </picker>
          <picker :range="groupList" :value="groupIndex" @change="onGroupChange" class="filter-picker">
            <view class="filter-value">{{groupList[groupIndex]}}</view>
          </picker>
        </view>
        
        
       

      </scroll-view>

    </view>

  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import GroupItem from '@/components/GroupItem/index.vue'
  import ClubList from '@/components/ClubList/index.vue'
  import ScheduleList from '@/components/ScheduleList/index.vue'
  import ResultList from '@/components/ResultList/index.vue'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const tabs = ref(['赛程', '奖牌榜', '俱乐部成员','积分详情'])
  const activeTab = ref(0)
  const projectList = ref(["全部项目", "100m", "200m"])
  const groupList = ref(["全部组别", "第10组", "第20组"])
  const projectIndex = ref(0)
  const groupIndex = ref(0)
  const scheduleList = ref([
    {
      time: "09:12",
      group: "10",
      event: "100m",
      person: "刘金瀚",
      result: "12.21",
      type: "预赛"
    }
  ])
  const groupedList = computed(() => {
    return scheduleList.value.reduce((acc, item) => {
      const date = item.time.split(' ')[0]
      if (!acc[date]) {
        acc[date] = { date, items: [] } 
      }
      acc[date].items.push(item)
      return acc
    }, {})
  })

  const onTab = (e) => {
    console.log('onTab',e);
    
    activeTab.value = e
  }
  const onProjectChange = (e) => {
    projectIndex.value = e.detail.value
  }
  const onGroupChange = (e) => {
    groupIndex.value = e.detail.value
  }
  const submitForm = () => {
    console.log('submitForm')
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
  .uv-form-item__body__left__content__required {
    color: red;
    /* 改变星号颜色 */
    margin-right: 10rpx !important;
    /* 添加右边距 */
    left: -12px !important;
  }
</style>